<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Human</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./css/human.css" />
  <link rel="stylesheet" href="./css/nav.css" />
  <script src="./javascript/history-jquery.min.js"></script>
  <script>
    window.onload = function () {
      const bottom = document.querySelector(".nav-bottom");
      const navMenu = document.querySelector(".nav-menu");

      bottom.addEventListener("click", mobileMenu);

      function mobileMenu() {
        bottom.classList.toggle("active");
        navMenu.classList.toggle("active");
      }

      var hashmap = {
        "屠守锷": "\"神剑\"铸造师",
        "梁守槃": "导弹\"怪杰\"",
        "孙家栋": "中国航天\"大总师\"",
        "杨利伟": "中华飞天第一人",
        "翟志刚": "中国太空漫步第一人",
        "刘洋": "中国\"航天一姐\""
      }
      var intext_map = {
        "屠守锷": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0浙江湖州人，导弹和火箭专家，中国科学院学部委员（院士），国际宇航科学院院士，“两弹一星”功勋奖章获得者,毕生从事导弹与航天技术的研究工作。领导参加地空导弹初期试制；研制液体弹道式地地中近程导弹、中程导弹；研制洲际导弹和长征2号运载火箭等。",
        "梁守槃": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0福建福州人，航空工程专家，中国科学院学部委员（院士），国际宇航科学院院士，梁守槃是中国弹道导弹“东风一号”总设计师，在仿制导弹研制工作中，创造性地提出“反设计”的研制方法。他坚持走自主研发反舰导弹之路，主持研发亚声速、超声速、小型固体三大系列岸对舰、舰对舰、空对舰等众多型号海防导弹武器系统。是中国航天事业的奠基者之一，被誉为‘中国海防导弹之父’",
        "孙家栋": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0辽宁省复县人，航天工程系统专家，中国科学院院士，国际宇航科学院院士，国际欧亚科学院院士，探月工程首任总设计师。孙家栋是中国第一个自行设计的中程导弹主任设计师，领导完成了导弹总体设计；任多颗人造卫星的技术总负责人、总设计师，主持完成了中国第一颗人造卫星、第一颗返回式卫星和第一颗静止轨道试验通信卫星的卫星总体设计，从事工作60年来，主持研制了45颗卫星",
        "杨利伟": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0辽宁省葫芦岛人，中国培养的第一代航天员，是中国进入太空的第一人。2003年10月15日北京时间9时，杨利伟乘由长征二号F火箭运载的神舟五号飞船首次进入太空，象征着中国太空事业向前迈进一大步，起到了里程碑的作用。",
        "翟志刚": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0黑龙江省齐齐哈尔人,2008年9月25日至27日的神舟七号飞行任务中，担任飞船指令长，是第一位出舱活动的中国人,2022年1月，神舟十三号乘组进入空间站已超3个月，加上此前的神舟七号任务，翟志刚累计在轨工作已达100天，成为继聂海胜、王亚平之后第三位在轨100天的中国航天员。",
        "刘洋": "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0河南林州人，2012年6月，执行神舟九号载人飞行任务，成为中国首位参加载人航天飞行的女航天员，2022年6月4日，执行神舟十四号载人飞行任务，刻苦认真，成为航天员后两年赶上十年的课程教学与十几个系统。现任全国妇联副主席，中国人民解放军航天员大队特级航天员，大校军衔。"
      }
      var cards = new Object();
      cards.card_prev = -1;
      window.setInterval(function () {
        cards.top_card = document.getElementsByClassName("swiper-slide-active").item(0).innerText;
        if (cards.top_card != cards.card_prev) {
          document.getElementById("intro").innerText = hashmap[cards.top_card];
          document.getElementById("intext").innerText = intext_map[cards.top_card];
        }
        cards.card_prev = cards.top_card;
      }, 100)
      // js逻辑为不断刷新页面读取classname为swiper-slide-active
      // 的元素，并读取其中的innertext内容，根据内容字符串
      // 作为索引，寻找到合适的对应文本插入到id为intro的div中
    }

  </script>

</head>

<body>
  <!-- 导航栏 -->
  <header class="header">
    <nav class="navbar">
      <a href="index.html" class="nav-logo">SpaceEye</a>
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="history.html" class="nav-link">航天历史</a>
        </li>
        <li class="nav-item">
          <a href="human.html" class="nav-link">重要人物</a>
        </li>
        <li class="nav-item">
          <a href="News.html" class="nav-link">近期资讯</a>
        </li>
        <li class="nav-item">
          <a href="aircraft.html" class="nav-link">航天器展示</a>
        </li>
        <li class="nav-item">
          <a href="emailsender.html" class="nav-link">太空漂流瓶</a>
        </li>
        <li></li>
      </ul>
      <div class="nav-bottom">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
  <!-- 人物卡片 -->
  <div class="card-container">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E5%B1%A0%E5%AE%88%E9%94%B7/1037183?fr=kg_general">
            屠守锷
          </a>
        </div>
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E6%A2%81%E5%AE%88%E6%A7%83/3711203?fr=kg_general">
            梁守槃
          </a>
        </div>
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E5%AD%99%E5%AE%B6%E6%A0%8B/1038927?fr=kg_general">
            孙家栋
          </a>
        </div>
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E6%9D%A8%E5%88%A9%E4%BC%9F/522856?fr=kg_general">
            杨利伟
          </a>
        </div>
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E7%BF%9F%E5%BF%97%E5%88%9A/9143038?fr=kg_general">
            翟志刚
          </a>
        </div>
        <div class="swiper-slide">
          <a class="card-link" href="https://baike.baidu.com/item/%E5%88%98%E6%B4%8B/5146151?fr=kg_general">
            刘洋
          </a>
        </div>

      </div>
    </div>
  </div>
  <div class="text-container">
    <!-- 人物介绍标题 -->
    <!-- 始终存在，hover后字体缩小 -->
    <!-- 此处为js自动刷新内容文本 -->
    <div class="intro" id="intro">

    </div>

    <!-- 人物介绍文字 -->
    <!-- hover后文字介绍模块出现 -->
    <div class="intext" id="intext">

    </div>

  </div>

  <!-- Swiper JS -->
  <script src="./javascript/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      effect: "cards",
      grabCursor: true,
    });
  </script>
</body>

</html>